<template>
	<view class="column h100 hidden">
		<view class="top-ctn">
			<view class="topBg absolute top0 left0" style="z-index: 1004"></view>
			<!-- part-输入内容 -->
			<view class="w-calc-23 justify-start relative" style="top: 318rpx; z-index: 1005">
				<view class="input-ctn mr8 justify-start align-center">
					<view class="w100 justify-start align-center pl16 pr9">
						<view class="justify-start align-center" @click="navTo('pages/find-car/city')">
							<text class="mr12 pb5">{{ queryParams.province_name }}</text>
							<view class="icon-down"></view>
						</view>
						<u-line direction="col" length="31rpx" color="#C2C2C2" margin="0 18rpx 0 13rpx"></u-line>
						<view class="flex-1">
							<input class="w100 input-css" v-model="queryParams.keywords" placeholder="输入你要找的车" type="text"
								placeholder-class="holder-css" @confirm="reSetList" />
						</view>
						<view class="search-btn" @click="reSetList">搜索</view>
					</view>
				</view>
				<u-image src="https://monvkeji.oss-cn-chengdu.aliyuncs.com/xunche/home/message-ic.png" width="67rpx"
					height="73rpx" @click="navTo('pages/message/index')" />
			</view>
			<view class="justify-around align-center pt45 absolute w100" style="top: 381rpx; z-index: 1002">
				<view class="justify-start align-center" @click="openOptions(0)">
					<text class="pr19 fs28">排序</text>
					<view class="pt5">
						<u-icon name="arrow-down" size="12rpx" color="#000000"></u-icon>
					</view>
				</view>
				<view class="justify-start align-center" @click="openOptions(1)">
					<text class="pr19 fs28">品牌</text>
					<view class="pt5">
						<u-icon name="arrow-down" size="12rpx" color="#000000"></u-icon>
					</view>
				</view>
				<view class="justify-start align-center" @click="openOptions(2)">
					<text class="pr19 fs28">价格</text>
					<view class="pt5">
						<u-icon name="arrow-down" size="12rpx" color="#000000"></u-icon>
					</view>
				</view>
				<view class="justify-start align-center" @click="openOptions(3)">
					<view class="mr9 fs28">筛选</view>
					<view class="pt10">
						<view class="filter-ic"></view>
					</view>
				</view>
			</view>
			<view class="bg-mask absolute top0 left0 animate" style="top: 318rpx; z-index: 1003" v-if="showPopup"
				@click="showPopup = false">
				<view class="justify-around align-center w100 bgf pb23 animate"
					:style="{ paddingTop: showPopup ? '108rpx' : '0' }">
					<view class="justify-start align-center" @tap.stop="openOptions(0)">
						<text :class="['pr19 fs28', actIndex === 0 && 'act-title']">排序</text>
						<view class="pt5">
							<u-icon name="arrow-down" size="12rpx" color="#000000"></u-icon>
						</view>
					</view>
					<view class="justify-start align-center" @tap.stop="openOptions(1)">
						<text class="pr19 fs28">品牌</text>
						<view class="pt5">
							<u-icon name="arrow-down" size="12rpx" color="#000000"></u-icon>
						</view>
					</view>
					<view class="justify-start align-center" @tap.stop="openOptions(2)">
						<text :class="['pr19 fs28', actIndex === 2 && 'act-title']">价格</text>
						<view class="pt5">
							<u-icon name="arrow-down" size="12rpx" color="#000000"></u-icon>
						</view>
					</view>
					<view class="justify-start align-center" @tap.stop="openOptions(3)">
						<view class="mr9 fs28">筛选</view>
						<view class="pt10">
							<view class="filter-ic"></view>
						</view>
					</view>
				</view>
				<view class="">
					<view class="bgf w-calc-29 animate" :style="{ height: showPopup && actIndex === 0 ? '666rpx' : '0rpx' }"
						v-if="showPopup && actIndex === 0">
						<view v-for="(item, index) in optionSort" :key="index">
							<view :class="['w-calc-20 fs28 ptb13 active_bg radius10', queryParams.sort === item.value && 'act-title']"
								style="color: #414141" @click="onCheckSort(item)">
								{{ item.label }}
							</view>
							<u-line margin="10rpx 0 17rpx" v-if="index < optionSort.length - 1"></u-line>
						</view>
					</view>
					<view class="w-calc-39 bgf animate justify-start align-start wrap pb30"
						:style="{ height: showPopup && actIndex === 2 ? '260rpx' : '0rpx', gap: '30rpx 24rpx' }"
						v-if="showPopup && actIndex === 2">
						<view :class="[
								'price-item',
								queryParams.priceStart + '-' + queryParams.priceEnd === item.value && 'price-act'
							]" v-for="item in optionPrice" :key="item.value" @click="onCheckPrice(item)">
							{{ item.label }}
						</view>
						<view class="price-item-end gap10">
							<input type="digit" style="width: 106rpx" class="input-ctx text-right" placeholder-class="input-holder"
								placeholder="最低价格" v-model="queryParams.priceStart" />
							<text class="color9">-</text>
							<input type="digit" style="width: 106rpx" class="input-ctx text-left" placeholder-class="input-holder"
								placeholder="最高价格" v-model="queryParams.priceEnd" />
							<text class="color0 fs28 ml15">万</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- part-筛选内容 -->
		<view class="list-ctn">
			<scroll-view scroll-y class="h100 scrolly" :refresher-enabled="scrollViewTool.isEnabled"
				:refresher-triggered="scrollViewTool.triggered" refresher-background="rgba(0,0,0,0)"
				@refresherrefresh="pullDownRefresh" @refresherrestore="scrollViewTool.triggered = false" :upper-threshold="100"
				:lower-threshold="100" @refresherabort="triggered = false" @scrolltolower="reachBottom">
				<template v-for="(item, index) in listData" :key="index">
					<view class="good-item" @click="navTo('pages/release/price-inquiry/detail', { id: item.id })">
						<view class="relative">
							<u-image :src="`https://monvkeji.oss-cn-chengdu.aliyuncs.com/xunche/home/good${index + 1}.jpg`"
								width="220rpx" height="164rpx" radius="10rpx" />
							<view class="tag">出价领红包</view>
						</view>
						<view class="ml24 flex-1">
							<view class="name">{{ item.name }}</view>
							<view class="time">{{ item.on_plate_time.split('-')[0] }}年/{{ item.mileage }}万公里</view>
							<view class="justify-end">
								<text class="price" v-if="item.max_inquiry">{{ item.max_inquiry }}万</text>
								<text v-else class="color9 fs20">暂无出价</text>
							</view>
							<view class="bottom">
								<view class="left">
									<view class="point">
										<u-image src="https://monvkeji.oss-cn-chengdu.aliyuncs.com/xunche/home/map.png" width="18rpx"
											height="23rpx" />
										<view class="text">{{ item.province }}</view>
									</view>
									<view class="date">{{ item.create_time }}</view>
								</view>
								<view class="right">最高出价</view>
							</view>
						</view>
					</view>
					<u-line margin="30rpx 0" length="696rpx" color="#EDEDED"></u-line>
				</template>
			</scroll-view>
		</view>

		<!-- part-发布组件 -->
		<releasePopup v-model:show="showRelease" @noLogin="onNoLogin" />
		<!-- part-登录弹窗 -->
		<loginPopup v-model:show="showLogin"></loginPopup>
		<!-- part-悬浮按钮 -->
		<fabButton bg="https://monvkeji.oss-cn-chengdu.aliyuncs.com/xunche/home/add.png" bgWidth="90rpx" bgHeight="90rpx"
			@click="showRelease = true" />
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		checkLogin,
		navTo
	} from '@/core/app';
	import {
		onShow, onLoad
	} from '@dcloudio/uni-app';
	import {
		listFindCar
	} from '@/api/find-car';
	import {
		useLoadPageList
	} from '@/hooks/useLoadPageList/useLoadPageList.js';

	import releasePopup from '@/components/release-popup/release-popup.vue';
	import loginPopup from './components/login-popup.vue';
	import fabButton from '@/components/fab-buttom/fab-buttom.vue';
	import storage from '@/utils/storage';
	import {
		useStore
	} from 'vuex';
import { dateFormat } from '../../utils/util';

	/* 初始化缓存 */
	const store = useStore();

	const queryParams = ref({
		keywords: '',
		province_id: '',
		city_id: '',
		brand_id: '',
		series_id: '',
		geartype: '',
		type: '',
		mileage: '',
		displacement: '',
		on_plate_time: '',
		sort: '',
		priceStart: '',
		priceEnd: ''
	});
	const {
		listData,
		listDataDelay,
		loadStatus,
		scrollViewTool,
		reachBottom,
		pullDownRefresh,
		reSetList,
		updateQueryParams
	} = useLoadPageList(listFindCar);

	/* 发布组件控制 */
	const showRelease = ref(false);

	/* 登录弹窗 */
	const showLogin = ref(false);
	function initShowLogin() {
		if(checkLogin()) return;
		const curDate = dateFormat('YYYY-mm-dd', new Date())
		const lastLogin = storage.get('xunche-last-login')
		console.log("initShowLogin", curDate, lastLogin)
		if (lastLogin !== curDate) {
			showLogin.value = true;
			storage.set('xunche-last-login', curDate)
		}
	}

	/* 顶部tab弹窗 */
	const actIndex = ref(0);
	const showPopup = ref(false);

	function openOptions(index) {
		actIndex.value = index;
		if (index === 3) {
			navTo('pages/find-car/filter');
			return;
		} else if (index === 1) {
			navTo('pages/find-car/car-series');
			return;
		}
		showPopup.value = true;
	}
	/* 排序选项 */
	const optionSort = ref([{
			label: '默认排序',
			value: ''
		},
		{
			label: '新车指导价最高',
			value: 'guide_price'
		},
		{
			label: '最新发布',
			value: 'create_time'
		},
		{
			label: '年龄最短',
			value: 'car_age'
		},
		{
			label: '里程最短',
			value: 'mileage'
		},
		{
			label: '红包未领完',
			value: 'balance'
		},
		{
			label: '最高出价',
			value: 'price'
		}
	]);

	function onCheckSort(item) {
		queryParams.value.sort = item.value;
		store.commit('SET_SORT', item.value);
		reSetList();
		showPopup.value = false;
	}

	/* 数据初始化 */
	function initFilter() {
		const params = store.getters.filterParams;
		queryParams.value = params || {};
		dataDeal2Update();
	}
	/* 数据处理-刷新 */
	function dataDeal2Update() {
		const data = {};
		if(queryParams.value.brand_id){
		data.brand_id = queryParams.value.brand_id;
		}
		if(queryParams.value.car_age_end){
		data.car_age = queryParams.value.car_age_start + '-' + queryParams.value.car_age_end;
		}
		if(queryParams.value.city_id){
		data.car_id = queryParams.value.car_id;
		}
		if(queryParams.value.city_id){
		data.city_id = queryParams.value.city_id;
		}
		if(queryParams.value.color){
			data.color = queryParams.value.color;
		}
		if(queryParams.value.displacement_end){
		data.displacement = (queryParams.value.displacement_start||0) + '-' + (queryParams.value.displacement_end||0);
		}
		if(queryParams.value.geartype){
		data.geartype = queryParams.value.geartype;
		}
		if(queryParams.value.mileage_end){
		data.mileage = queryParams.value.mileage_start + '-' + queryParams.value.mileage_end;
		}
		if(queryParams.value.price_end){
		data.price = (queryParams.value.price_start||0) + '-' + (queryParams.value.price_end||0);
		}
		if(queryParams.value.province_id){
		data.province_id = queryParams.value.province_id;
		}
		if(queryParams.value.series_id){
		data.series_id = queryParams.value.series_id;
		}
		if(queryParams.value.sort){
		data.sort = queryParams.value.sort;
		}
		if(queryParams.value.type){
		data.type = quefryParams.value.type;
		}
		updateQueryParams(data);
		reSetList();
	}

	/* 出价相关 */
	const optionPrice = ref([{
			label: '全部',
			value: '-'
		},
		{
			label: '0-5万',
			value: '0-5'
		},
		{
			label: '5-10万',
			value: '5-10'
		},
		{
			label: '10-15万',
			value: '10-15'
		},
		{
			label: '15-20',
			value: '15-20'
		},
		{
			label: '20-30',
			value: '20-30'
		},
		{
			label: '30-40',
			value: '30-40'
		},
		{
			label: '40-70',
			value: '40-70'
		},
		{
			label: '70-100',
			value: '70-100'
		},
		{
			label: '100万以上',
			value: '100-'
		}
	]);

	function onCheckPrice(item) {
		const price = item.value.split('-');
		queryParams.value.priceStart = price[0];
		queryParams.value.priceEnd = price[1];
		store.commit('SET_PRICE', {
			priceStart: price[0],
			priceEnd: price[1]
		});
		reSetList();
		showPopup.value = false;
	}
	
	function onNoLogin(){
		showLogin.value = true;
	}

	onShow(() => {
		initFilter();
	});
	onLoad(() => {
		initShowLogin();
	})
</script>

<style scoped lang="scss">
	.top-ctn {
		width: 100%;
		height: 498rpx;
		position: relative;
	}

	.topBg {
		width: 100%;
		height: 378rpx;
		background: url('https://monvkeji.oss-cn-chengdu.aliyuncs.com/xunche/home/top-bg.png') no-repeat;
		background-size: 100%;
	}

	.input-ctn {
		height: 69rpx;
		background: #ffffff;
		border-radius: 20rpx;
		border: 2rpx solid #000000;
		flex: 1;
	}

	.search-btn {
		font-weight: 500;
		font-size: 28rpx;
		color: #ffffff;
		width: 119rpx;
		height: 54rpx;
		background: #0759bb;
		border-radius: 10rpx;
		line-height: 54rpx;
		text-align: center;
	}

	.icon-down {
		background: url('https://monvkeji.oss-cn-chengdu.aliyuncs.com/xunche/home/arrow-down.png') no-repeat;
		background-size: 100%;
		width: 15rpx;
		height: 12rpx;
		overflow: hidden;
	}

	.holder-css {
		font-weight: 400;
		font-size: 26rpx;
		color: #bdbcba;
	}

	.input-css {
		font-weight: 400;
		font-size: 26rpx;
		color: #000000;
	}

	.filter-ic {
		background: url('https://monvkeji.oss-cn-chengdu.aliyuncs.com/xunche/home/filter.png') no-repeat;
		background-size: 100%;
		width: 24.5rpx;
		height: 33rpx;
	}

	.list-ctn {
		flex: 1;
		overflow: hidden;
		background-color: #ffffff;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		padding: 26rpx 20rpx;
		box-sizing: border-box;
	}

	.bg-mask {
		width: 100%;
		height: calc(100vh - 318rpx);
		background-color: rgba(0, 0, 0, 0.5);
	}

	.act-title {
		color: #0759bb !important;
		font-weight: bold !important;
		font-size: 28rpx;
	}

	.price-item {
		width: 150rpx;
		height: 67rpx;
		background: #f7f8fa;
		border-radius: 8rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #000000;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-shrink: 0;
	}

	.price-item-end {
		width: 320rpx;
		height: 67rpx;
		background: #f7f8fa;
		border-radius: 8rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #000000;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-shrink: 0;

		.input-holder {
			font-weight: 400;
			font-size: 26rpx;
			color: #b1b1b1;
		}

		.input-ctx {
			font-weight: 400;
			font-size: 26rpx;
			color: #000000;
		}
	}

	.price-act {
		background: rgba(7, 89, 187, 0.2);
		font-weight: bold;
		font-size: 28rpx;
		color: #0759bb;
	}

	.good-item {
		display: flex;
		justify-content: flex-start;
		align-items: center;

		.tag {
			position: absolute;
			top: 0;
			left: 0;
			background: #f9de49;
			border-radius: 10rpx 0rpx 10rpx 0rpx;
			width: 122rpx;
			height: 35rpx;
			padding: 4rpx 10rpx 3rpx 11rpx;
			box-sizing: border-box;
			font-weight: 500;
			font-size: 20rpx;
			color: #000000;
		}

		.name {
			font-weight: 600;
			font-size: 28rpx;
			color: #000000;
		}

		.time {
			font-weight: 400;
			font-size: 24rpx;
			color: #606060;
			margin-top: 6rpx;
			text-align: left;
		}

		.price {
			font-weight: 600;
			font-size: 30rpx;
			color: #d74b34;
			text-align: right;
		}

		.bottom {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;

			.left {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				font-weight: 400;
				font-size: 24rpx;
				color: #606060;

				.point {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					font-weight: 400;
					font-size: 24rpx;
					color: #606060;

					.text {
						margin-left: 6rpx;
					}
				}

				.date {
					font-weight: 400;
					font-size: 24rpx;
					margin-left: 17rpx;
				}
			}

			.right {
				padding-bottom: 3rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #606060;
			}
		}
	}
</style>